import React, { useCallback } from 'react';
// import { useSelector, useDispatch } from 'react-redux';

import { useSelector, useDispatch } from '../yl-react-redux';

function ReactReduxHookPage() {
  const dispatch = useDispatch();
  const count = useSelector(({ count }) => count);

  const addState = useCallback(() => {
    dispatch({ type: 'ADD', payload: 100 });
  }, []);

  const minusState = useCallback(() => {
    dispatch({ type: 'MINUS', payload: 100 });
  }, []);

  return (
    <div>
      <h3>ReactReduxHookPage</h3>
      <div>{count}</div>
      <button onClick={addState}>add</button>
      <button onClick={minusState}>minus</button>
    </div>
  );
}

export default ReactReduxHookPage;
